<template >
  <div id="body" >
    <div class="logo" id="logos">
      <img src="./assets/logo.png" alt="" @click="toIndex">
      <p style="margin-top: -90px;margin-left: 450px;font-size:50px">一站式在线审批系统</p>
      <el-switch  inline-prompt
                 active-color="var(--el-fill-color-dark)"
                 inactive-color="var(--el-color-primary)"
                 active-text="黑暗"
                  v-model="isBlack.black"
                 inactive-text="明亮"
                 @change="toggleDark(isBlack.black)"  style="left:130px;top: -80px"/>
      <div style="margin-top: -80px;text-align: right;margin-right: 2vh" v-if="router.currentRoute.value.path!=='/login' && router.currentRoute.value.path!=='/' && router.currentRoute.value.path!=='/syslogin'"><message></message></div>
    </div>
    <div class="app-container" v-if="router.currentRoute.value.path==='/'">
      <img class="imgs"
           src="https://ts1.cn.mm.bing.net/th/id/R-C.8849be3505b1f9b2c7170d5e7f467ec5?rik=Uwe%2f7jcPiXPWkQ&riu=http%3a%2f%2fwww.hnyc998.com%2fpublic%2fuploads%2f20190505%2f1557038320292390.jpg&ehk=qXdk3Pq2qluOEe8C9HJzIPblUSHoWUl7B%2bs9Mbjc10U%3d&risl=&pid=ImgRaw&r=0"
           alt="" @click="toIndex" >
      <div id="logins" class="login" @click="router.push('/login')"><p style="margin-top: 150px; ">登录</p><br><p style="margin-top: 110px">注册</p></div>
    </div>
  <router-view></router-view>
    </div>
</template>

<script setup>

// import {useDark, useToggle} from "@vueuse/core";
import {onMounted, ref} from "vue";
import emitter from './utils/buts'
import {useBlackSotre} from '@/stores/black'
import message from './views/Message.vue'
// const isDark = useDark()
const isBlack = useBlackSotre()
const toggleDark = (black) =>{
  const html = document.documentElement
  let element = document.getElementById('body');
  let element2 = document.getElementById('logos');
  let element3 = document.getElementById('logins');
  if (black===false){
    element.style.backgroundColor = 'white';
    element2.style.background = 'linear-gradient(90deg,#EE82EE 0%,#FFFFFF 1.83%,#FFFFFF 6%,#00D1FF 100%)';
    if(router.currentRoute.value.path==='/'){
      element3.style.background = 'linear-gradient(220.55deg, #8FFF85 0%, #39A0FF 100%)';
    }
    black = true;
    click('light')
    html.classList.remove('dark')
  }else {
    element.style.backgroundColor = '#363636';
    element2.style.background = 'linear-gradient(0deg,#060505 0%,#E3EEFF 100%)';
    if(router.currentRoute.value.path==='/'){
      element3.style.background = 'linear-gradient(220.55deg, #B9A14C 0%, #000000 100%)';
    }
    click('dark')
    black = false;
    html.classList.add('dark')
  }
}

const click=(data)=>{
  emitter.emit('chart',data)
  emitter.emit('login')
}

onMounted(()=>{
  toggleDark(isBlack.black)
})
//点击图片跳转主页
import {useRouter} from 'vue-router'
const router = useRouter()
const toIndex=()=>{
  router.push('/')
}
</script>

<style>
.logo{
  height: 120px;
  background: linear-gradient(90deg,#EE82EE 0%,#FFFFFF 1.83%,#FFFFFF 6%,#00D1FF 100%);
  border-radius:10px;
  img{
    margin-top: 10px;
    margin-left: 10px;
    width: 100px;
    height: 100px;
    border-radius:10%;
  }
}
.imgs{
  width: 74%;height: 640px;margin-top: 20px;margin-left: 40px;border-radius: 10px;
}
.login{
  height:615px;width: 20%;margin-right: 20px;margin-top: 30px; background: linear-gradient(220.55deg, #8FFF85 0%, #39A0FF 100%);float: right;
  border-radius:10px;text-align: center;font-size: 40px;font-family: 华文行楷,serif;    cursor: pointer;
  transition: all 0.5s;
}
.login:hover{
  transform: scale(1.03);
  box-shadow: 5px 5px 0px 0px  darkslategray;
  color: lemonchiffon;
}
</style>